import type {
  CreateCrudOptionsProps,
  CreateCrudOptionsRet,
} from '@fast-crud/fast-crud';

import type { Ref } from 'vue';

import { asyncFindUrlById, UserApi } from '#/api';
import { DictEnum, FileBizTypeEnum } from '#/enums/commonEnum';
import { backendDict } from '#/plugins/fast-crud/common';

export function createCrudOptions(
  _props: CreateCrudOptionsProps,
): CreateCrudOptionsRet {
  return {
    crudOptions: {
      request: { addRequest: UserApi.updateBaseInfoRequest },
      form: {
        display: 'grid',
        mode: 'add',
        col: {
          style: { gridColumn: 'span 2' },
        },
      },
      columns: {
        id: {
          title: 'ID',
          type: 'text',
          form: { show: false },
        },
        username: {
          title: '账号',
          type: 'text',
          form: {
            col: { style: { gridColumn: 'span 1' } },
            render: ({ form }) => {
              return <fs-copyable v-model={form.username}></fs-copyable>;
            },
          },
        },
        email: {
          title: '邮箱',
          type: 'text',
          form: {
            col: { style: { gridColumn: 'span 1' } },
            render: ({ form }) => {
              return <fs-copyable v-model={form.email}></fs-copyable>;
            },
          },
        },
        logo: {
          title: '头像',
          type: 'cropper-uploader',
          form: {
            col: { style: { gridRow: '1/3', gridColumn: '1/2' } },
            component: {
              valueType: 'key',
              buildUrl: async (res: any) => {
                const file = await asyncFindUrlById(res);
                return file.data;
              },
              uploader: {
                param: {
                  bizType: FileBizTypeEnum.BASE_USER_AVATAR,
                },
              },
            },
          },
        },
        mobile: {
          title: '手机',
          type: 'text',
          form: {
            render: ({ form }) => {
              return <fs-copyable v-model={form.mobile}></fs-copyable>;
            },
          },
        },
        idCard: {
          title: '身份证号',
          type: 'text',
        },
        nickName: {
          title: '昵称',
          type: 'text',
        },
        sex: {
          title: '性别',
          type: 'dict-radio',
          dict: backendDict(DictEnum.Sex),
          form: { component: { optionName: 'a-radio-button' } },
        },
        nation: {
          title: '民族',
          type: 'dict-select',
          dict: backendDict(DictEnum.NATION),
        },
        education: {
          title: '学历',
          type: 'dict-select',
          dict: backendDict(DictEnum.EDUCATION),
        },
        workDescribe: {
          title: '个人简介',
          type: 'textarea',
        },
      },
    },
  };
}

export const frontRules = (_: Ref) => {
  return {};
};
